<template>
  <div>
    <h2>动态表单</h2>
    <form action="">
      <div>
        <input type="text" v-model="names" />
        <input type="number" v-model="ages" />
        <select name="" id="" v-model="sele">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
        <button @click.prevent="addInfo">添加</button>
        <button @click.prevent="delInfo">删除</button>
      </div>

      <ul>
        <li v-for="(item, index) in userinfo" :key="item.id">
          <input type="checkbox" v-model="item.zj" />
          <span
            >id：{{ index }}-名称：{{ item.name }}-年龄：{{ item.age }}-性别：{{ item.sex }}</span
          >
        </li>
      </ul>
    </form>
    <p>{{ stra }}</p>
    <button @click="str++">str</button>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'

interface Info {
  id?: number
  name: string
  age: number
  sex: string
  zj?: boolean
}
const userinfo = ref<Info[]>([
  {
    id: 1,
    name: '张三',
    age: 20,
    sex: '男',
    zj: false
  }
])

const str = ref(0)
const stra = computed(() => {
  return str.value * 2
})
watch(
  () => stra.value,
  (newVal) => {
    console.log(newVal)
  }
)

const names = ref('')
const ages = ref(0)
const sele = ref('男')
const addInfo = () => {
  if (names.value === '') {
    return alert('请输入名称！')
  }
  if (ages.value <= 0) {
    return alert('请输入年龄！')
  }

  userinfo.value.push({
    name: names.value,
    age: ages.value,
    sex: sele.value,
    zj: false
  })
  names.value = ''
  ages.value = 0
}

const delInfo = () => {
  userinfo.value = userinfo.value.filter((item) => item.zj !== true)
}
</script>

<style></style>
